<template>
	<div class="table-box">
		<el-card shadow="never" style="margin-bottom: 10px">
			<el-radio-group v-model="type">
				<el-radio-button label="站内通知" />
				<el-radio-button label="新闻公告" />
			</el-radio-group>
		</el-card>

		<ProTable
			v-if="type == '站内通知'"
			ref="proTable"
			title="站内通知"
			:columns="columns"
			:requestApi="getTableList"
			:initParam="initParam"
			:dataCallback="dataCallback"
		>
			<template #title="scope">
				<div class="news-title" @click="showDetial(scope.row)">
					{{ scope.row.title }}
					<span class="round" v-if="!scope.row.is_read"></span>
				</div>
			</template>
		</ProTable>
		<ProTable
			v-else
			ref="proTable"
			title="新闻公告"
			:columns="columnsNews"
			:requestApi="getTableList"
			:initParam="initParamNews"
			:dataCallback="dataCallback"
		>
			<template #title="scope">
				<div class="news-title" @click="showDetial(scope.row)">
					{{ scope.row.title }}
					<span class="round" v-if="!scope.row.is_read"></span>
				</div>
			</template>
		</ProTable>

		<News v-model:showDialog="showDialogNews" :detial="newsDetial"></News>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import ProTable from "@/components/ProTable/index.vue";
import { listNotice, constraintCreated } from "@/api/modules/message";
import News from "@/components/News/index.vue";

const showDialogNews = ref(false);
const newsDetial = ref({});
const type = ref<string>("站内通知");
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref();

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
	type: 1
});
const initParamNews = reactive({
	type: 2
});
// 表格配置项
const columns: ColumnProps[] = [
	{ prop: "title", label: "标题", align: "left", minWidth: 300 },
	// { prop: "content", label: "内容", align: "left" },
	{ prop: "add_time", label: "时间", width: 300, align: "left" }
];
const columnsNews: ColumnProps[] = [
	{ prop: "title", label: "标题", align: "left", minWidth: 300 },
	// { prop: "content", label: "内容", align: "left" },
	{ prop: "add_time", label: "时间", width: 300, align: "left" }
];
const showDetial = (detial: any) => {
	detial.is_read = true;
	readNotice(detial.id);
	newsDetial.value = detial;
	showDialogNews.value = true;
};
const readNotice = (id: number) => {
	constraintCreated({
		id: id
	});
};
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
	return {
		list: data.data,
		total: data.total
		// pageNum: data.pageNum,
		// pageSize: data.pageSize
	};
};

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
	let newParams = JSON.parse(JSON.stringify(params));
	newParams.username && (newParams.username = "custom-" + newParams.username);
	return listNotice(newParams);
};
</script>

<style lang="scss" scoped>
.news-title {
	cursor: pointer;
	display: flex;
	align-items: center;
	&:hover {
		color: var(--el-color-primary);
	}
}
.round {
	border-radius: 50%;
	background-color: red;
	width: 5px;
	height: 5px;
	display: inline-block;
}
</style>
